/**
 * 基础菜单 商品属性管理
 */
<template>
  <div>
    <!-- 添加sku界面 -->
     <el-dialog title="sku规格" :visible.sync="editSkuVisible" width="60%" @click="closeSkuDialog">
      <el-form label-width="90px"   ref="editSku">
         <el-form-item label="规格"  v-if="editSku.specificationsValue != ''">
          <el-input size="small" v-model="editSku.specificationsValue" auto-complete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="规格名"  v-if="editSku.specificationsValue == ''">
          <el-input size="small" v-model="editSku.specifications" auto-complete="off" placeholder="请输入规格名"></el-input>
        </el-form-item>
         <el-form-item label="规格值"  v-if="editSku.specificationsValue == ''">
          <el-input size="small" v-model="editSku.value" auto-complete="off" placeholder="请输入规格值"></el-input>
        </el-form-item>
        <el-form-item label="规格图"  v-if="editSku.specificationsValue != ''">
          <!-- <el-input size="small" v-model="editSku.picUrl" auto-complete="off" placeholder="请输入规格图"></el-input> -->
          <el-upload
            action="qiniuDomain"
            list-type="picture-card"
            :http-request="upLoadToQiniu"
            :show-file-list="false"
            :before-upload="beforeUpload">
             <img v-if="editSku.picUrl" :src="editSku.picUrl" class="avatar">
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
           <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
         <el-form-item label="规格价格"  v-if="editSku.specificationsValue != ''">
          <el-input size="small" v-model="editSku.price" auto-complete="off" placeholder="请输入规格价格"></el-input>
        </el-form-item>
        <el-form-item  width="100" align="center">
            <el-button size="mini" type="primary" @click="addSku" v-if="editSku.specificationsValue == ''">添加</el-button>
            <el-button size="mini" type="primary" @click="updateSku" v-if="editSku.specificationsValue != ''">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import {cdn} from '../../../config/qiniuConfig'
import {uploadToken} from '../../api/uploadMG'
export default {
  name: "GoodsSku",
  props: ['editSkuVisible', 'skuSpecifications', 'editSku'],
  data() {
    return {
      dialogVisible:false, //图片上传
      // 实名认证后创建的存储空间对应的上传地址(华东，华南等等不一样：https://developer.qiniu.com/kodo/manual/1671/region-endpoint)
      qiniuDomain: cdn.qiniuDomain,
      // 创建成功后官方随机分配的公开图片地址前缀，即上传成功后对应的公用图片地址前缀
      qiniuViewHost: cdn.host,
      dialogImageUrl: '',
    }
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    addSku() {
      this.$emit('addSku', this.editSku);
      this.closeSkuDialog()
    },
    updateSku() {
      this.$emit('updateSku', this.editSku);
      this.closeSkuDialog()
    },
    // 图片上传
    async upLoadToQiniu(req) {
      const config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      let fileType = "";
      if (req.file.type === "image/png") {
        fileType = "png";
      } else {
        fileType = "jpg";
      }
      // 重命名要上传的文件
      const keyname = `${new Date().getTime()}${Math.random().toString(36).slice(2)}.${fileType}`;
      // 上传时候的Token,可前端自己生成,安全起见后端生成！
      // 获取Token
      let token = '';
      await uploadToken().then(res => {
        if(res.code == '200') {
          token = res.data
        } else {
          // that.loading = true
        }
      })
      const formdata = new FormData();
      formdata.append("file", req.file);
      formdata.append("token", token);
      formdata.append("key", keyname);

      const result = await this.$http.post(this.qiniuDomain, formdata, config);

      // http://qp0e5erxn.hn-bkt.clouddn.com/1614150299156jajg0szk7rs.png
      this.editSku.picUrl = this.qiniuViewHost + "/" + keyname
    },

    // 上传图片前的校验
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png" || file.type === "image/jpg";
      const isLt5M = file.size / 1024 / 1024 < 5;
      if (!isJPG) {
        this.$message({
          showClose: true,
          message: "上传图片只能是JPG/PNG 格式!",
          type: "error"
        });
      }
      if (!isLt5M) {
        this.$message({
          showClose: true,
          message: "上传头像图片大小不能超过 5MB!",
          type: "error"
        });
      }
      return isJPG && isLt5M;
    },
    // 关闭编辑、增加弹出框
    closeSkuDialog() {
      this.$emit("update:editSkuVisible", false);
    }
    
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>